<template>
  <div v-show="!isloading">
    <div class="top-bar" :style="{'background': 'rgba(206, 61, 62, '+ opacity +')'}" >
      <mu-appbar :title="fname">
        <mu-icon-button icon="arrow_back" slot="left" @click="goBack" />
      </mu-appbar>
    </div>
    <div class="playlist-info">
      <div class="info-wrapper">
        <div class="info-gallery">
          <span>{{listDesc.play | formatCount}}</span>
          <img :src="!isloading?'http://hongtaofans.cn/music/resources/pic/disk/'+listDesc.pic:''"  alt="fengmian">
        </div>
        <div class="info-title">
          <p class="title">{{listDesc.dName}}</p>
          <p class="author">
            <mu-avatar slot="left" :src="'http://hongtaofans.cn/music/resources/pic/logo/'+listDesc.logo"  :size="30" :iconSize="20"/>
            <span>{{listDesc.publisher}}</span>
          </p>
        </div>
      </div>
       <div class="bg-mask"></div>
       <div class="bg-player" :style="{ 'background-image':'url(' +'http://hongtaofans.cn/music/resources/pic/disk/'+listDesc.pic}"></div>
    </div>  
    <div class="playlist-holder">
      <div class="add-all">
        <mu-flat-button label="播放全部" class="demo-flat-button" icon="add_circle_outline" @click="playAll"/>
      </div>
      <mu-divider/>
      <div>
         <mu-circular-progress :size="40" class="center" v-if="isloading" />
         <mu-list :value="value" v-show="!isloading" @change="change">
           <div v-for="(item, index) in list" @click="playAudio(item)">
              <mu-list-item :disableRipple="true" :title="item.mName" :value="item.mId" :describeText="item.authod">
                <span slot="left" class="indexStyle">{{index + 1}}</span>
              </mu-list-item>
               <mu-divider inset/>
           </div>
         </mu-list>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import qs from 'qs'
  export default {
    data () {
      return {
        coverImgUrl: '../../static/default_cover.png',
        name: '歌单标题',
        id: 0,
        fname: '歌单',
        playCount: 0,
        description: '描述',
        creator: {
          'avatarUrl': '../../static/user-default.png',
          'nickname': '昵称'
        },
        listDesc: {},
        list: [],
        opacity: 0,
        value: 0,
        isloading: true
      }
    },
    beforeRouteEnter: (to, from, next) => {
      next(vm => {
        // 根据传过来的ID是否一样，判断加载
        // if (parseInt(to.params.id) !== parseInt(vm.id)) {
        //   vm.getDesc()
        // }
        vm.getDesc()
        vm.getSong()
        window.onscroll = () => {
          var opa = window.pageYOffset / 150
          if (opa > 0.5) {
            vm.fname = vm.listDesc.dName
          } else {
            vm.fname = '歌单'
          }
          vm.opacity = window.pageYOffset / 150
        }
      })
    },
    beforeRouteLeave: (to, from, next) => {
      window.onscroll = null
      next()
    },
    methods: {
      goBack () {
        this.$router.go(-1)
      },
      getSong () {
        var data = qs.stringify({
          dId: this.$route.params.id
        })
        this.$http.post('http://hongtaofans.cn/music/disk/diskmusic', data).then((res) => {
          console.log(res.data.result)
          this.list = res.data.result
          this.isloading = false
        }).catch((error) => {
          console.log('加载所有歌曲出错：' + error)
        })
      },
      getDesc () {
        this.isloading = true
        var data = qs.stringify({
          dId: this.$route.params.id
        })
        this.$http.post('http://hongtaofans.cn/music/disk/getdiskinfo', data).then((res) => {
          console.log(res.data.result)
          this.listDesc = res.data.result
        }).catch((error) => {
          console.log('加载歌单信息出错：' + error)
        })
      },
      change (val) {
        this.value = val
      },
      playAudio (item) {
        this.$store.commit('pause')
        const data = qs.stringify({
          mId: item.mId
        })
        this.$http.post('http://hongtaofans.cn/music/music/getmusicpath', data).then((res) => {
          console.log(res.data)
          var url = `http://hongtaofans.cn/music/resources/music/${res.data.musicpath}`
          var audio = {}
          audio.id = item.mId
          audio.singer = item.mName
          audio.albumPic = `http://hongtaofans.cn/music/resources/pic/singer/${res.data.coverpath}`
          audio.name = item.authod
          this.$store.commit('addToList', audio)
          this.$store.commit('openLoading')
          this.$store.commit('setAudio')
          this.$store.commit('setLocation', url)
          // this.$store.dispatch('getSong', audio.id)
        }).catch((error) => {
          console.log('加载单曲信息出错：' + error)
        })
      },
      playAll () {
        let items = []
        this.list.forEach((item) => {
          items.push({
            albumPic: item.al.picUrl,
            id: item.id,
            name: item.al.name,
            singer: item.ar[0].name
          })
        })
        this.$store.commit('addToList', items)
      }
    },
    computed: {
      ...mapGetters([
        'songList'
      ])
    },
    filters: {
      formatCount (v) {
        if (v < 9999) {
          return v
        } else {
          return (v / 10000).toFixed(0) + '万'
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .top-bar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 20;
    text-align: left;
  }

   // 修改默认的bar样式
  .mu-appbar {
    background-color: transparent;
  }
  .bar-line {
    display: block;
    bottom: 0 ;
    left: 0;
    display: block;
    width: 100%;
    height: 0.05rem;
    background: radial-gradient(#d3d3d3 -90%, transparent 100%);
  }

  .mu-paper-1 {
    box-shadow: none;
    > .mu-appbar-title {
      text-align: center;
      font-size: 14px;
    }
  }

  .playlist-info {
    position: relative;
    padding: 60px .5rem 0;
    height: 10rem;
  }

  .info-wrapper {
    position: relative;
    z-index: 10;
    color: #fff;
    .info-gallery {
      position: relative;
      float: left;
      width: 6rem;
      overflow: hidden;
      span {
        position: absolute;
        margin-top: .05rem;
        margin-left: .1rem;
        margin-right: .1rem;
        display: block;
        padding-right: 5px;
        width: 97%;
        top: 0;
        left: 0;
        font-size: 12px;
        text-align: right;
        background: rgba(0,0,0,.35);
        z-index: 11;
      }
      img {
        width: 6rem;
        height: 6rem;
        border: 1px solid #fff;
      }
    }
    .info-title {
      float: left;
      width: 7.5rem;
      margin-left: 1rem;
      .title {
        font-size: 16px;
      }
      .author {
        span {
          overflow: hidden;
          display: inline-block;
          height: 30px;
          text-overflow: ellipsis;
          margin-left: 5px;
          width: 5.4rem;
          white-space: nowrap;
          font-size: 14px;
          vertical-align: top;
          line-height: 30px;
        }
      }
    }
  }

  .bg-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.35);
    z-index: 2;
  }

  .bg-player {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom right; 
        -webkit-filter: blur(30px);
        filter: blur(30px);
        z-index: 1;
    }

  .playlist-holder {
    position: relative;
    background: #fff;
    z-index: 3;
    .add-all {
      padding-left: .4rem;
    }
  }
  
  .indexStyle {
    padding-left: 10px;
    font-size: 18px;
    font-weight: bolder;
  }

  .center {
    display: block!important;
    margin: 10% auto 0;
  }
</style>
